<template>
	<div>
		<v-checkbox
			v-for="(item, index) in checkboxOptions"
			:key="index"
			v-model:value="selectedValues"
			:item="item"
			:disabled="item.disabled"
			:indeterminate="item.indeterminate"
			@change="change"
		/>
	</div>
</template>

<script setup>
import { ref } from 'vue';

const checkboxOptions = [
	{ label: '唱', value: '1' },
	{ label: '跳', value: '2', disabled: true },
	{ label: 'rap', value: '3' },
	{
		label: '篮球',
		value: {
			S: '不会',
			A: '会一点',
			M: '会'
		},
		indeterminate: true
	}
];

const selectedValues = ref(['1']);

const change = (value) => {
	console.log(value);
};
</script>
